<template>
  <svg id="polygon-fill-line">
    <svg id="polygon-fill">
      <line v-for="(item, i) in polygonFillLine" :key="i" v-bind="item" />
    </svg>
    <svg id="polygon-line" v-if="config.showLine">
      <line v-for="(item, i) in polygon" :key="i" v-bind="item" />
    </svg>
  </svg>
</template>

<script setup lang="ts">
import {
  reactive,
  ref,
  onMounted,
  computed,
  watch,
  getCurrentInstance,
} from "vue";

import { getBlueLineFuncs, getBoundary, lineX, segmentsIntr } from "../utils/drawPolygon";

let polygonFillLine = ref([]);

let polygon = ref([]);

const props = defineProps({
  config: Object,
});


/**
   * @method parsePolygon 绘制多边形
   * @param {Array} points 多边形的点[{"x":x,"y":y},{"x":x,"y":y}]
   * @param {String} color 多边形颜色
   * @param {Object} config 绘制参数
   * @return {Object} polygonLinear 多边形边的二元一次方程的数组; polygonHtml 多边形显示组件; points多边形的点的数组
   */
   let parsePolygon = ({points, color, config}) => {
    let unit = config.unit || 'mm';
    let scale = config.scale || 1;
    if (points.length === 0) {
      return {
        polygonLinear: [],
        polygonHtml: [],
        points: []
      };
    }
    let polygonLinear = [];
    let polygonHtml = [];
    let newPoints = [];
    for (let i = 0; i < points.length; i++) {
      //根据两点求方程
      if (points[i + 1] !== undefined) {
        let linear = lineX(points[i], points[i + 1]);
        polygonLinear.push(linear);
        newPoints.push([points[i], points[i + 1]]);
        polygonHtml.push({
          x1: points[i].x * scale + unit,
          y1: points[i].y * scale + unit,
          x2: points[i + 1].x * scale + unit,
          y2: points[i + 1].y * scale + unit,
          style: config.lineStyle
        });
      }
    }

    return {
      polygonHtml: polygonHtml,
      polygonLinear: polygonLinear,
      polygonInter: newPoints
    };
  }


/**
 * @method drawBlueLine 绘制房颤斜线
 * @return
 */
let drawPolygonLine = () => {
  const { polygonPoints, options } = props.config;
  let scale = options.scale || 1;
  let unit = options.unit || "mm";
  let htmlArray = [];
  let polygon = parsePolygon({
    points: polygonPoints,
    color: options.lineStyle.stroke,
    config: options,
  });
  let polygonLinear = polygon.polygonLinear;
  let polygonHtml = polygon.polygonHtml;
  let polygonInter = polygon.polygonInter;
  let totalPoints = [];
  let blueLineFuncs = getBlueLineFuncs(0.5, options);

  for (let i = 0; i < blueLineFuncs.length; i++) {
    let pointArray = [];
    for (let j = 0; j < polygonLinear.length; j++) {
      //一条边与斜线的交点
      //计算交点
      let pointNow = polygonInter[j];
      let { maxX, minX, maxY, minY } = getBoundary(pointNow);
      let line1 = blueLineFuncs[i];
      let line2 = polygonLinear[j];
      let points = segmentsIntr(line1, line2);
      // 判断交点是否在线段上，即在多边形内
      if (
        points.x >= minX &&
        points.x <= maxX &&
        points.y >= minY &&
        points.y <= maxY
      ) {
        pointArray.push(points);
      }
    }
    if (pointArray.length) {
      totalPoints.push(pointArray);
    }
  }
  for (let j = 0; j < totalPoints.length; j++) {
    let points = totalPoints[j];
    if (points.length === 2) {
      htmlArray.push({
        x1: points[0].x * scale + unit,
        y1: points[0].y * scale + unit,
        x2: points[1].x * scale + unit,
        y2: points[1].y * scale + unit,
        style: options.lineStyle,
      });
    } else if (points.length > 2 && points.length % 2 === 0) {
      //根据x值大小排序（升序）冒泡排序
      for (let i = 0; i < points.length - 1; i++) {
        //取数组中任意两点匹配
        for (let k = 0; k < points.length - 1 - i; k++) {
          let pointX = points[k].x;
          let nextPointX = points[k + 1].x;
          if (pointX > nextPointX) {
            let temp = points[k];
            points[k] = points[k + 1];
            points[k + 1] = temp;
          }
        }
      }
      //相邻两点生成一条线段
      for (let i = 0; i < points.length; i = i + 2) {
        htmlArray.push({
          x1: points[i].x * scale + unit,
          y1: points[i].y * scale + unit,
          x2: points[i + 1].x * scale + unit,
          y2: points[i + 1].y * scale + unit,
          style: options.lineStyle,
        });
      }
    }
  }
  return {
    htmlArray,
    polygonHtml,
  };
};

onMounted(() => {
  //console.log('3.-组件挂载到页面之后执行-------onMounted')
  let datas = drawPolygonLine();
  polygonFillLine.value = datas.htmlArray;
  polygon.value = datas.polygonHtml;

});
</script>

<style lang="scss" scoped></style>
